<template>
  <el-dialog
    v-model="showDialog"
    title="编辑ER模型"
    width="50%"
    draggable
    destroy-on-close
    align-center
    :before-close="handleDialogClose"
  >
    <div class="wrapper">
      <el-segmented v-model="value" :options="options" @change="change" block/>
      <div :class="animation">
        <transition :name="value === 'Json' ? 'slide-left' : 'slide-right'">
          <MonacoEditor
            v-if="value === 'Json'"
            v-model:value="contentDialog"
            :class="codeMirror"
            language="json"
            @contextmenu="contextmenu"
          />
          <MonacoEditor
            v-else
            v-model:value="protoContent"
            :class="codeMirror"
            language="java"
            @contextmenu="contextmenu"
          />
        </transition>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="commit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "",
    },
  }),
  emit = defineEmits(["update:show", "update:content", "cancel", "commit"]),
  animation = ref("animation"),
  codeMirror = ref("code-mirror"),
  showDialog = ref(false),
  contentDialog = ref(""),
  protoContent = ref(""),
  value = ref("Json"),
  options = ["Json", "Proto"],
  change = (val: any) => {
    console.log(val);
  },
  cancel = () => {
    showDialog.value = false;
    emit("update:show", showDialog.value);
    emit("cancel");
  },
  commit = () => {
    showDialog.value = false;
    emit("update:show", showDialog.value);
    emit("update:content", contentDialog.value);
    emit("commit");
  },
  handleDialogClose = () => {
    ElMessageBox.confirm("你确定关闭对话框么?")
      .then(() => {
        cancel();
      })
      .catch(() => {
        // catch error
      });
  },
  contextmenu = (e: any) => {
    if (e === "fullscreen") {
      if (animation.value != "") {
        animation.value = "";
        codeMirror.value = "editor-fullscreen";
      } else {
        animation.value = "animation";
        codeMirror.value = "code-mirror";
      }
    }
  };

watch(
  () => props.show,
  (newValue) => {
    showDialog.value = newValue;
  }
);

watch(
  () => props.content,
  (newValue) => {
    contentDialog.value = newValue;
  }
);
</script>

<style lang="scss" scoped>
.code-mirror {
  height: 60vh;
  direction: ltr;
}

.wrapper {
  overflow-x: hidden;
  .animation {
    display: flex;
    width: 200%;
    & > div {
      width: 50%;
    }
    $slide-duration: 0.5s;
    .slide-left-enter-active {
      animation: slide-left-in $slide-duration;
    }
    .slide-left-leave-active {
      animation: slide-left-out $slide-duration;
    }
    .slide-right-enter-active {
      animation: slide-right-in $slide-duration;
    }
    .slide-right-leave-active {
      animation: slide-right-out $slide-duration;
    }
    @keyframes slide-left-in {
      0% {
        transform: translateX(-200%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    @keyframes slide-left-out {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    @keyframes slide-right-in {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    @keyframes slide-right-out {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }
}

// css操作
.editor-fullscreen {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 1000;
}
</style>
